<template>
  <div class="zhumian">
    <baidu-map class="map" :center="center" :zoom="15" @ready="handler" :scroll-wheel-zoom="true">
      <select class="rigth_cs">
        <option value="成都">成都</option>
        <option value="成都">重庆</option>
        <option value="成都">广东</option>
        <option value="成都">山西</option>
      </select>
      <div class="fanhui" @click="back">&lt;</div>
      <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
    </baidu-map>
    <div class="jiansuo">
      <div class="jiansuo_top">
        <!-- <div class="tab_1 tab" :class="{active: item.active}" v-for="(item, index) in items" :key="index"  @click="onclick(item)">{{item.name}}</div> -->

        <div class="tab_1 tab" :class="{active: activeIndex == 0}" @click="activeIndex = 0">小米之家</div>
        <div class="tab_2 tab" :class="{active: activeIndex == 1}" @click="activeIndex = 1">线下专区</div>
        <div class="tab_l"></div>
        <div class="tab_3 tab" :class="{active: activeIndex == 2}" @click="activeIndex = 2">服务网点</div>
        <div class="tab_4 tab_x">
          <van-icon name="search" />
        </div>
      </div>

      <div class="jiansuo_b">
        <van-row v-if="activeIndex == 0" @click="changeAddress">
          <h1 class="cell_t">小米之家成都万象城店</h1>
          <p class="cell_x">10:00-22:00</p>
          <p class="cell_x">四川省成都市成华区双庆路8号成都万象城301号商铺</p>
        </van-row>
        <van-row v-else-if="activeIndex == 1" @click="activeIndex = 1">
          <h1 class="cell_t">小米之家成都大源世豪广场店</h1>
          <p class="cell_x">10:00-22:00</p>
          <p class="cell_x">四川省成都市武侯区剑南大道中段998号世豪广场1楼</p>
        </van-row>
        <van-row v-else @click="changeAddress">
          <h1 class="cell_t">小米之家成都大悦城店</h1>
          <p class="cell_x">10:00-22:00</p>
          <p class="cell_x">四川省成都市成华区双庆路8号成都万象城301号商铺</p>
        </van-row>
        <van-row @click="changeAddress">
          <h1 class="cell_t">小米之家成都万象城店</h1>
          <p class="cell_x">10:00-22:00</p>
          <p class="cell_x">四川省成都市成华区双庆路8号成都万象城301号商铺</p>
        </van-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      center: { lng: 104.121644, lat: 30.656023 }, // 中心坐标
      Color: { color: "#FF9F5F!important", border: "1px solid #FF9F5F" },
      BMap2: null,
      map2: null,
      marker: null,
      // 标注的新图标
      icon: null,
      opts: {
        width: 15, // 信息窗口宽度
        height: 10, // 信息窗口高度
        title: "小米之家成都万象城店"
      },
      mapStyle: {
        styleJson: [
          {
            featureType: "all",
            elementType: "geometry",
            stylers: {
              hue: "#007fff",
              saturation: 89
            }
          },
          {
            featureType: "water",
            elementType: "all",
            stylers: {
              color: "#ffffff"
            }
          }
        ]
      },
      location: "四川",
      keyword: "百度",
      //   active: 2,
      //   istrue: 0,
      activeIndex: 0
    };
  },
  created() {},
  methods: {
    //   返回上一步
    back() {
      this.$router.back(-1);
    },
    handler({ BMap, map }) {
      console.log("b", BMap, map);
      this.BMap2 = BMap;
      this.map2 = map;

      // 新图标
      this.icon = new BMap.Icon(
        "http://i8.mifile.cn/v1/a1/87fbaa8d-73a4-247a-acea-dea9fed47099.png",
        new BMap.Size(70, 70),
        {
          imageSize: new BMap.Size(70, 70)
        }
      );
      // 创建窗口对象
      var infoWindow = new BMap.InfoWindow("", this.opts); // 创建信息窗口对象
      map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口

      var point = new BMap.Point(104.121644, 30.656023); // 标注坐标
      map.centerAndZoom(point, 13); // 地图初始化??

      // 创建标注对象,并修改marker的新图标
      this.marker = new BMap.Marker(point, { icon: this.icon });
      map.addOverlay(this.marker); // 将标注添加到地图中
    },

    changeAddress() {
      console.log(1);

      let item = {
        position: { lng: 116.404, lat: 39.915 },
        store_name: "测试"
      };
      //   this.opts.title =
      let lng = item.position.lng;
      let lat = item.position.lat;
      this.map2.removeOverlay(this.marker); // 移除标注
      this.center.lng = lng;
      this.center.lat = lat;
      var point = new this.BMap2.Point(lng, lat);
      this.map2.centerAndZoom(point, 13);
      // 创建标注对象,并修改marker的新图标
      this.marker = new this.BMap2.Marker(point, { icon: this.icon });
      this.map2.addOverlay(this.marker); // 将标注添加到地图中
      // 创建窗口对象
      var infoWindow = new this.BMap2.InfoWindow("", this.opts); // 创建信息窗口对象
      this.map2.openInfoWindow(infoWindow, this.map2.getCenter()); // 打开信息窗口
    },
    // 自定义标注
    SquareOverlay(center, length, color) {
      this._center = center;
      this._length = length;
      this._color = color;
    },
    async onLoad(i) {
      this.click = i;
      let { data: res } = await this.$http.get("/user/userinfo");
      console.log("小米之家", res.data.store_type_list[i].store_list);
      this.list = res.data.store_type_list[i].store_list;
    }
  }
};
</script>
<style>
.map {
  width: 100%;
  height: 300px;
}

.rigth_cs {
  position: absolute;
  top: 54px;
  right: 25px;
  width: 80px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background-color: #fff;

  border: 1px;
  border-radius: 15px;
}
.fanhui {
  position: absolute;
  top: 15px;
  left: 20px;
  width: 30px;
  height: 30px;
  background-color: #fff;
  border: 1px;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
}
.jiansuo {
  width: 100%;
  height: 500px;
  background-color: #fff;
}

.jiansuo_top {
  height: 60px;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
}
.tab {
  float: left;
  width: 80px;
  height: 30px;
  margin: 15px 8px;
  border: 1px solid #ccc;
  border-radius: 15px;
  text-align: center;
  line-height: 30px;
  font-size: 14px;
}
.tab_l {
  float: left;
  width: 0;
  height: 10px;
  border: 1px solid #ccc;
  margin: 25px 0 0 0;
}

.tab_x {
  float: left;
  width: 30px;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 50%;
  margin: 15px 0 0 50px;
}
.jiansuo_b .van-row:last-child {
  height: 100%;
  border-bottom: 1px solid #ccc;
}
.van-icon {
  margin: 7px 0 0 7px;
}
.cell_t {
  margin-left: 8px;
  font-size: 16px;
  font-weight: 400;
}
.cell_x {
  font-size: 12px;
  margin: 0 8px;
}
.van-row {
  border-top: 1px solid #ccc;
  padding: 5px 0;
}
.active {
  color: orangered;
  border: 1px solid orangered;
  z-index: 999;
}
</style>
